<template>
  <a-card :bordered="false">
    <a-card :bordered="false" size="small">
      <a-breadcrumb>
        <a-breadcrumb-item><router-link to="/goodsList">商品管理</router-link></a-breadcrumb-item>
        <a-breadcrumb-item>商品详情</a-breadcrumb-item>
      </a-breadcrumb>
    </a-card>
    <a-card>
      <a-tabs v-model="activeKey">
        <a-tab-pane :key="1" tab="基础信息">
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">商品名称:</div>
            <div class="meizong_detail_val">{{detail.name}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">类目:</div>
            <div class="meizong_detail_val">
              <span class="meizong_detail_cat1Name">{{detail.cat1Name}}</span>
              <a-button type="primary" @click="funEditCat" icon="edit" size="small">修改类目</a-button>
            </div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">二级类目:</div>
            <div class="meizong_detail_val">{{detail.cat2Name}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">缩略图:</div>
            <div class="meizong_detail_val">
              <ant-img :antImgesUl="detail.img"/>
              <!-- <template v-for="(item,index) in detail.img"  >
                <ant-img :antImges="item" :key="index" />
              </template> -->
            </div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">轮播图:</div>
            <div class="meizong_detail_val">
              <ant-img :antImgesUl="detail.sliderImg"/>
            </div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">原价:</div>
            <div class="meizong_detail_val">￥{{detail.price | money}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">现价:</div>
            <div class="meizong_detail_val">￥{{detail.salePrice | money}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">商品所属店铺:</div>
            <div class="meizong_detail_val">{{detail.merchantName}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">是否分店可用:</div>
            <div class="meizong_detail_val">{{detail.subUse | subUse}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">商品详情描述:</div>
            <div class="meizong_detail_val">{{detail.content}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">商品详情图:</div>
            <div class="meizong_detail_val">
              <ant-img :antImgesUl="detail.contentImg"/>
              <!-- <template v-for="(item,index) in detail.contentImg"  >
                <ant-img :antImges="item" :key="index" />
              </template> -->
            </div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">排序:</div>
            <div class="meizong_detail_val">{{detail.sort}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">排序:</div>
            <div class="meizong_detail_val">{{detail.sort}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">新品推荐:</div>
            <div class="meizong_detail_val">{{detail.news}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">热门推荐 :</div>
            <div class="meizong_detail_val">{{detail.hot}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">浏览量:</div>
            <div class="meizong_detail_val">{{detail.browse}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">销量:</div>
            <div class="meizong_detail_val">{{detail.sales}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">点赞数:</div>
            <div class="meizong_detail_val">{{detail.star}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">收藏数:</div>
            <div class="meizong_detail_val">{{detail.collect}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">订单状态:</div>
            <div class="meizong_detail_val">{{detail.status | goodsStatus}}</div>
          </div>
          <div class="meizong_detail_row" v-show="detail.status == 2">
            <div class="meizong_detail_title">操作:</div>
            <div class="meizong_detail_val">
              <a-button type="danger" @click="handCheck()" >进行审核</a-button >
            </div>
          </div>
          <div class="meizong_detail_row" v-show="detail.status == 6">
            <div class="meizong_detail_title">操作:</div>
            <div>
              <a-button type="danger" @click="handUpDown(0)" >平台下架</a-button >
            </div>
          </div>
          <div class="meizong_detail_row" v-show="detail.status == 1">
            <div class="meizong_detail_title">操作:</div>
            <div>
              <a-button type="danger" @click="handUpDown(1)" >上架产品</a-button >
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane :key="2" tab="审核记录">
          <a-table 
            ref="table" 
            size="middle" 
            bordered 
            rowKey="id" 
            :scroll="{ x: 1300 }"
            :columns="columns" 
            :dataSource="tableData" 
            :pagination="ipagination" 
            :loading="loading" 
            @change="handleTableChange" >
          </a-table>
        </a-tab-pane> 
      </a-tabs>
    </a-card>
    <!-- 表单区域 -->
    <examine-modal ref="modalForm" @closeModal="closeModal" @examineModal="examineModal"></examine-modal>
    <up-down-modal ref="upDownForm" @closeModal="closeModal" @upDownModal="upDownModal"></up-down-modal>
    <edit-cat-modal ref="editCatForm" @closeModal="closeModal"></edit-cat-modal>
  </a-card>
</template>

<script>
// import moment from 'moment'
import ExamineModal from '@/views/components/meizong/examineModal'
import AntImg from '@/views/components/meizong/antImg'
import UpDownModal from '@/views/goods/modules/upDownModal'
import EditCatModal from '@/views/goods/modules/editCatModal'

import ApiTree from "@/api/goods/goodsList";
import { Slime, crud } from "@/mixins/slime";

export default {
  name: "goodsDetail",
  mixins: [Slime],
  components: {
    ExamineModal,
    AntImg,
    UpDownModal,
    EditCatModal,
  },
  data() {
    return {
      activeKey: 1,
      detailId: null,
      detail:{},
      //table
      tableData:[],
      columns: [
        {
          title: "审批人id",
          align: "center",
          dataIndex: "userId",
        },
        {
          title: "审批人姓名",
          align: "center",
          dataIndex: "userName",
        },
        {
          title: "动作",
          align: "center",
          dataIndex: "action",
          customRender: function (status) {
            switch (status) {
              case 0:
                return "初始状态";
              case 1:
                return "提交审核";
              case 2:
                return "审核通过";
              case 3:
                return "审批拒绝";
              default:
                return "未知状态";
            }
          },
        },
        {
          title: "备注",
          align: "center",
          dataIndex: "remark",
        },
        {
          title: "创建时间",
          align: "center",
          dataIndex: "createTime",
        },
      ],
    };
  },
  created() {
    let id = this.$route.query.id
    this.detailId = id
    this.loadData();
    this.loadRecords();
  },
  methods: {
    // 加载表格数据
    loadData() {
      let that = this
      let id = this.detailId
      ApiTree.getDetail(id).then((res)=>{
        let data = res.result
        this.detail = {
          ...data,
          img: that.antImageArr(data.img),
          sliderImg: that.antImageArr(data.sliderImg),
          contentImg: that.antImageArr(data.contentImg),
        }
      })
    },
    //审核记录
    loadRecords(){
      let id = this.detailId
      ApiTree.detailRecords(id).then((res)=>{
        let data = res.result
        this.tableData = data
      })
    },
    //1审核通过/0不通过
    handCheck(){
      this.$refs.modalForm.open()
    },
    //审核结束
    examineModal(val){
      const that = this;
      let param = {
        ...val,
        goodsId: this.detailId, //这里记得修改
      }
      ApiTree.detailCheck(param).then((res) => {
        that.$message.success('审核成功');
      }).finally(() => {
        that.loadData();
        that.loadRecords();
      });
    },
    //1上架 0下架
    handUpDown(val){
      this.$refs.upDownForm.open(val,'商品',this.detail.status)
    },
    //上下架结束
    upDownModal(val){
      const that = this;
      let ids = []
      ids.push(parseInt(this.detailId))
      let param = {
        ids: ids,
        subUse: val.subUse, //是否分店可用
        status:"PlatformDown",
      }
      ApiTree.detailUpDown(param).then((res) => {
        that.$message.success('操作成功');
      }).finally(() => {
        that.loadData();
        that.loadRecords();
      });
    },
    //修改类目
    funEditCat(){
      let catId = this.detail.catId
      let catId2 = this.detail.catId2
      let goodsId = this.detailId
      let merchantId = this.detail.merchantId
      this.$refs.editCatForm.open(catId,catId2,goodsId,merchantId)
    }
  },
  filters: {
    //订单状态
    goodsStatus: function (status) {
      switch (status) {
        case 0:
          return "初始状态";
        case 1:
          return "平台下架";
        case 2:
          return "待审核";
        case 3:
          return "审核通过";
        case 4:
          return "审核不通过";
        case 5:
          return "已下架";
        case 6:
          return "已上架";
        default:
          return "未知状态";
      }
    },
    subUse: function (status) {
      switch (status) {
        case 0:
          return "否";
        case 1:
          return "是";
        default:
          return "未知";
      }
    },
  },
};
</script>
<style scoped>
.meizong_detail_cat1Name{
  margin-right: 30px;
}
</style>